<template>
    <div style="color: #333333;">
        <title1></title1>

        <!--头部面包屑-->
        <div class="breadCrumbBox flexCenter">
          <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item><router-link :to="home">首页</router-link></a-breadcrumb-item>
              <a-breadcrumb-item href="">{{projectTitle}}</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
        </div>

        <!--主content-->
        <div class="mainContentBox">
            <div class="title1Box flexAlignCenter">项目信息</div>
            <div class="projectDetailBox flexBetween">
                <img :src="imgUrl" alt="">
                <div class="projectInfoBox flexDirectionCenter" >
                    <div class="flexStart flexAlignCenter">
                        <span :title="projectTitle" style="font-size: 22px;font-weight: bold;display: inline-block;width: 450px;word-wrap: break-word;overflow: hidden;word-break: break-all;">{{projectTitle}}</span>
                        <div style="width: 20px;"></div>
                        <div>
                            <a-tag style="border-radius: 0;" color="#1492FF">改扩建</a-tag>
                            <a-tag style="border-radius: 0;" color="#1492FF">局监管</a-tag>
                        </div>
                    </div>
                    <!--分割线-->
                    <div style="width: 590px;height: 1px;background-color: #E4E4E4"></div>
                    <div style="width: 520px;line-height: 29px;margin-top: 0px" class="flexBetween">
                        <div style="font-size: 15px">
                            <p>项目编号：2017-3200000-48-01-1124</p>
                            <p>计划开工时间：2020-04</p>
                            <p>计划竣工时间：2025-10</p>
                            <p>实际完工时间：--</p>
                            <p>建设周期：3.5年</p>
                            <p>批复概算（亿元）：154.1</p>

                        </div>
                        <div style="font-size: 15px">
                            <p>项目简称：京沪沂淮段扩建工程</p>
                            <p>计划完工时间：2023-10</p>
                            <p>实际完工时间：2019-02</p>
                            <p>实际竣工时间：--</p>
                            <p>路线总长（km）：106.9</p>
                            <p>项目状态：在建</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="title2Box flexAlignCenter">项目简介</div>
            <span class="box" style="width: 100%;display: block;overflow: hidden;text-indent: 29px;line-height: 1.8" :style="styleVar">
                全长约106.9公里，概算总投资113.5亿元，起自京沪高速公路苏鲁省界，接正在扩建的京沪高速公路山东段，经新沂、沭阳、淮阴，止于王兴枢纽互通北侧，接拟扩建的京沪高速公路淮安至江都段。全线采用双向八车道高速公路标准扩建，采用沿既有公路两侧加宽为主、局部分离为辅的扩建方案，设计速度120公里/小时。全线改扩建8处互通式立交，新建2处互通式立交。原位扩建2处服务区，移位新建1处服务区。全线划分为8个路基桥梁标段。
            </span>
            <p style="width: 100%;text-align: right;color: #1492FF;cursor: pointer;margin-top: 10px;" @click="showMore">显示全部</p>
            <div class="title1Box flexAlignCenter">参建单位</div>
            <div class="participatingUnitsBox flexDirectionCenter">
                <div class="flexAlignCenter" @click="goConstructionUnit">
                    <img src="../../assets/bigSquare3.jpg" alt="">
                    <span class="mainText">江苏省交通工程集团有限公司</span>
                    <span style="width: 150px" class="paraphrase">标段号：JHK-SY3标</span>
                    <span class="paraphrase">监理单位：江苏华宁工程咨询有限公司</span>
                </div>
                <div class="flexAlignCenter" @click="goConstructionUnit">
                    <img src="../../assets/bigSquare3.jpg" alt="">
                    <span class="mainText">中铁十一局集团有限公司</span>
                    <span style="width: 150px" class="paraphrase">标段号：JHK-GY1标</span>
                    <span class="paraphrase">监理单位：江苏润通项目管理有限公司</span>
                </div>
                <div class="flexAlignCenter" @click="goConstructionUnit">
                    <img src="../../assets/bigSquare3.jpg" alt="">
                    <span class="mainText">中石化胜利建设工程有限公司</span>
                    <span style="width: 150px" class="paraphrase">标段号：JHK-GY2标</span>
                    <span class="paraphrase">监理单位：江苏润通项目管理有限公司</span>
                </div>
                <div class="flexAlignCenter" @click="goConstructionUnit">
                    <img src="../../assets/bigSquare3.jpg" alt="">
                    <span class="mainText">中交三公局第二工程有限公司</span>
                    <span style="width: 150px" class="paraphrase">标段号：JHK-HA2标</span>
                    <span class="paraphrase">监理单位：江苏苏科建设项目管理有限公司</span>
                </div>
            </div>
        </div>

        <!--底部技术支持-->
        <supportCompany></supportCompany>
    </div>
</template>

<script>
    import title1 from "@/views/title/index.vue"
    import supportCompany from "@/views/supportCompany/index.vue"

    export default {
        mounted(){
            window.scrollTo(0,0);
            this.imgUrl = JSON.parse(sessionStorage.getItem("imgdata")).img_content;
            this.projectTitle = JSON.parse(sessionStorage.getItem("imgdata")).detail;
          },
        data(){
            return {
                home: '/gateway',
                height: '75px',
                isShowMore: false,
                imgUrl: '',
                projectTitle: ''
            }
        },
        components: {
            title1,
            supportCompany
        },
        methods: {
            showMore(){
                this.isShowMore = !this.isShowMore
                if (this.isShowMore) {
                    this.height = 'auto'
                } else {
                    this.height = '75px'
                }

            },
            goConstructionUnit(){
                this.$router.push({path: '/fu/construction'})
            }
        },
        computed: {
            styleVar() {
              return {
                '--box-height': this.height
              }
            }
        },
    }
</script>

<style scoped>
    div, p, span{
        font-family: "Microsoft YaHei";
    }
    .breadCrumbBox{
        width: 100%;
        height: 40px;
        background-color: rgba(246, 248, 249, 1);
        position: fixed;
        top: 100px;
    }
    ::v-deep .ant-breadcrumb > span:last-child a{
        color: rgba(20, 146, 255, 1);
    }
    .mainContentBox{
        width: 1200px;
        margin: auto;
        margin-bottom: 110px;
    }
    .title1Box{
        width: 100%;
        height: 91px;
        font-size: 32px;
    }
    .title2Box{
        width: 100%;
        height: 130px;
        font-size: 32px;
    }
    .projectDetailBox{
        width: 1200px;
        height: 382px;
    }
    .projectInfoBox{
        width: 650px;
        height: 382px;
        background-color: rgba(246, 248, 249, 1);
        padding: 30px;
        padding-top: 28px;
        padding-bottom: 10px;
    }
    .box{
        height: var(--box-height);
    }
    .participatingUnitsBox{
        width: 1200px;
        /*height: 442px;*/
    }
    .participatingUnitsBox > div{
        width: 100%;
        height: 88px;
        background-color: #F6F8F9;
        margin-bottom: 30px;
    }
    .participatingUnitsBox > div:hover{
        background-color: #1492FF;
        cursor: pointer;
    }
    .participatingUnitsBox > div:hover .mainText{
        color: white;
    }
    .participatingUnitsBox > div:hover .paraphrase{
        color: white;
    }
    .participatingUnitsBox > div > img{
        margin-left: 30px;
    }
    .mainText{
        margin-left: 39px;
        font-weight: bold;
        color: #333333;
        font-size: 18px;
        width: 250px;
    }
    .paraphrase{
        color: #999999;
        font-size: 16px;
        font-weight: 400;
        margin-left: 60px;
    }
    .flexBetween>img {
      width: 550px;
      height: 382px;
      object-fit: cover;
    }
</style>
